<template>
  <div>
    <el-card>
    <el-form :inline="true"  class="query-form" size="small">
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click.native="handleForm(null,null)">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable"
              v-loading="loading"
              :data="list"
              :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
              border>
      <el-table-column label="版本 ID" prop="sysversionid"  width="80" align="center" />
      <el-table-column label="版本名称"  prop="versionname" align="center" />
      <el-table-column label="版本" align="center"  prop="version" width="100"></el-table-column>
      <el-table-column label="版本描述"  with="300"  :show-overflow-tooltip="true" align="center" prop="versionexplain"> </el-table-column>
      <el-table-column label="app名称"  prop="versiontype" align="center" >
        <template slot-scope="scope">
          <span v-if="scope.row.versiontype ==1" style="color:green">被服务商城app</span>
          <span v-if="scope.row.versiontype ==2" style="color:red">VIP-app</span>
        </template>
      </el-table-column>
      <el-table-column label="APP类型"  align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.apptype ==1">android</span>
          <span v-if="scope.row.apptype ==2">ios</span>
        </template>
      </el-table-column>
      <el-table-column label="是否强制更新"  align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.versionupdate == 0">禁用</el-tag>
          <el-tag v-if="scope.row.versionupdate == 1">启用</el-tag>
          <el-tag v-if="scope.row.versionupdate == 2">兼容</el-tag>
        </template>
      </el-table-column>
     <el-table-column label="操作"  align="center" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="mini"
                     @click.native="handleForm(scope.$index, scope.row)">编辑</el-button>
          <!-- <el-button type="danger"
                     size="mini"
                     @click.native="delate(scope.row.sysversionid)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
   
    <el-pagination class="pagination-container"
                   background
                   :page-size="query.pageSize"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total,sizes,prev, pager, next, jumper"
                   :current-page="this.query.currentPage"
                   :page-sizes="[5,10, 20, 30, 50]"
                   :total="totalNumber"></el-pagination>
    <!--表单-->
    <el-dialog :title="formMap[formName]"
               :visible.sync="formVisible"
               :before-close="hideForm"
               width="50%"
               top="5vh"
               v-dialogDrag
               :close-on-click-modal="false"
               >
        <template slot="title">
            <div class="avue-crud__dialog__header">
                <span class="el-dialog__title">
                    <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                    {{formMap[formName]}}
                </span>
            </div>
        </template>
    <el-card>
      <el-form :model="formData"  :rules="formRules" ref="dataForm" label-width="140px">
        <el-form-item label="版本名称：" prop="versionname">
          <el-input v-model="formData.versionname" placeholder="请输入版本名称" clearable auto-complete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="版本：" prop="version">
          <el-input  v-model="formData.version"  placeholder="请输入版本" auto-complete="off" clearable :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="版本描述：" prop="versionexplain">
            <el-input type="textarea" v-model="formData.versionexplain"  placeholder="请做好版本描述" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="APP名称：" prop="versiontype" >
          <el-radio-group v-model="formData.versiontype" :disabled="disabled">
            <el-radio :label="1">服务商城app</el-radio>
            <el-radio :label="2">VIP-app</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="APP类型：" prop="apptype" >
          <el-radio-group v-model="formData.apptype" :disabled="disabled">
            <el-radio :label="1">android</el-radio>
            <el-radio :label="2">ios</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="版本下载地址：" prop="versionurl">
          <el-input  v-model="formData.versionurl"   placeholder="请输入版本下载地址" auto-complete="off"  clearable :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="是否强制更新：" prop="versionupdate">
          <el-radio-group v-model="formData.versionupdate">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">兼容</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      </el-card>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click.native="hideForm">取消</el-button>
        <el-button type="primary"
                   @click.native="formSubmit()"
                   :loading="formLoading">提交</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
    getVersionList, //获取列表
    addVersion //添加新版本
} from "../../api/auth/authPermissionRule";
    export default {
        data(){
            return {
                loading:false,
                list:[],//列表显示
                formData:{
                    versionname:"",//版本名称
                    version:"",//版本
                    versionexplain:"",//版本描述
                    versiontype:"",//app名称
                    apptype:"",//app类型
                    versionurl:"",//版本下载地址
                    versionupdate:""//是否强制更新
                },//弹窗里面显示的数据
                query: {
                    currentPage: 1,
                    pageSize: 5,
                },
                formName: null,
                formMap: {
                    add: "添加",
                    edit: "编辑",
                },
                totalNumber:0,
                formVisible:false,
                formLoading:false,
                disabled:false,
                formRules: {
                    versionname: [
                        { required: true, message: "请输入名称", trigger: "blur" }
                    ],
                    version: [
                        { required: true, message: "请输入版本号", trigger: "blur" }
                    ],
                    versionexplain:[
                        {required: true, message: "请确定描述内容", trigger: "blur"}
                    ],
                    versiontype:[
                        {required: true, message: "请选择app名称", trigger: "change"}
                    ],
                    apptype:[
                        {required: true, message: "请选择app类型", trigger: "change"}
                    ],
                    versionurl:[
                        {required: true, message: "请输入版本地址", trigger: "blur"}
                    ],
                    versionupdate:[
                        {required: true, message: "请选择是否更新", trigger: "change"}
                    ]
                },
            }
        },
        methods:{
            //获取页面数据列表
            getList(){
              this.loading = true;
              getVersionList(this.query)
                .then(response => {
                  if (response.code) {
                    this.$message.error(response.message);
                  }
                  this.totalNumber =response.data.totalNumber
                  this.list = response.data.list || [];
                  setTimeout(() => {
                    this.loading = false;
                  }, 0.3 * 1000);
                })
                .catch(() => {
                  this.loading = false;
                  this.list = [];
                });
            },
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getList();
            },
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            },
            //开启添加弹窗
            handleForm(index,row){
                this.formVisible =true
                if(row !==null){
                  this.formData = Object.assign({},row); 
                }
                if(index !==null){
                  this.formName = "edit";
                  this.disabled = true
                }else{
                  this.formData={}
                  this.formName = "add";
                  this.disabled =false
                }
                //清空表单
                if (this.$refs["dataForm"]) {
                  this.$refs["dataForm"].clearValidate();
                  this.$refs["dataForm"].resetFields();
                }
                
            },
            //关闭弹窗
            hideForm(){
                this.formVisible =false
                // this.formData = {}
                if (this.$refs["dataForm"]) {
                    this.$refs["dataForm"].clearValidate();
                    this.$refs["dataForm"].resetFields();
                }
            },
            //提交按钮
            formSubmit(){
                this.$refs["dataForm"].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        let data = Object.assign({},this.formData)
                        
                        addVersion(data)
                        .then(response => {
                        this.formLoading = false;
                        if (response.code) {
                            this.$message.error(response.message);
                            return false;
                        }
                        this.$message.success("操作成功");
                        this.getList()
                        // // 刷新表单
                        this.$refs["dataForm"].resetFields();
                        this.formVisible = false;
                        
                        })
                        .catch(() => {
                        this.formLoading = false;
                        });
                    }
                });
            },
            // //删除功能
            // delate(id){
            //   // console.log(id)
            //   if(id){
            //     this.$message.warning("该功能暂未开启")
            //   }

            // }
        },
        created(){
          this.getList()
        },

    }
</script>


